<template>
    <div class="app-container">
        <el-row>
            <el-col :span=" 24 " class="card-box">
                <el-card>
                    <searchForm @init=" init " :searchData=" searchData " :searchItem=" searchItem "></searchForm>
                </el-card>
            </el-col>
            <el-col :span=" 24 " class="card-box">
                <el-card>
                    <my-table :columns=" columns " :showIndex=" true " :data=" tableData " :loading=" table_loading "
                        :pagination=" pagination " :cellStyle=" { padding: '6px 0' } " @currentChange=" currentChange "
                        @handleSizeChange=" handleSizeChange ">
                        <template #parameter=" slotProps ">
                            <el-tooltip class="box-item" effect="dark" placement="top-start">
                                <template #content>
                                    <div class="tooltip-contnet">{{ slotProps.callback.row.parameter }}</div>
                                </template>
                                <div class="text-ellipsis">{{ slotProps.callback.row.parameter }}</div>
                            </el-tooltip>
                        </template>
                        <template #returnContent=" slotProps ">
                            <el-tooltip class="box-item" effect="dark" placement="top-start">
                                <template #content>
                                    <div class="tooltip-contnet">{{ slotProps.callback.row.returnContent }}</div>
                                </template>
                                <div class="text-ellipsis">{{ slotProps.callback.row.returnContent }}</div>
                            </el-tooltip>
                        </template>
                    </my-table>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup name="productPackage">
import myTable from "@/components/common/table.vue"
import searchForm from "@/components/common/searchForm.vue"
import { findUserLog } from "@/api/api";
import { getTableData } from '@/mixins/mixins';
const columns = ref([
    {
        label: "userId",
        prop: "userId"
    },
    {
        label: "bodyId",
        prop: "bodyId"
    },
    {
        label: "模块",
        prop: "module"
    },
    {
        label: "响应时间",
        prop: "time"
    },
    {
        label: "方法",
        prop: "operator",
    },
    {
        label: "创建时间",
        prop: "createTime",
        time: true
    },
    {
        label: "参数",
        prop: "parameter",
        slot: "parameter",
    },
    {
        label: "返回内容",
        prop: "returnContent",
        slot: 'returnContent'
    }
])
const searchItem = ref([
    {
        type: "input",
        label: "userId",
        prop: "userId",
        placeholder: "请填写userId"
    },
    {
        type: "input",
        label: "bodyId",
        prop: "bodyId",
        placeholder: "请填写bodyId"
    },
    {
        type: "input",
        label: "模块",
        prop: "module",
        placeholder: "请填写模块"
    },
    {
        type: "input",
        label: "方法",
        prop: "operator",
        placeholder: "请填写方法"
    },
    {
        type: "daterange",
        dateType: 'datetime',
        label: "时间",
        timeFormat: "YYYY-MM-DD HH:mm:ss",
        timeList: ["startTime", "endTime"]
    },
])
const searchData = ref({
    userNumber: "",
})
//hook
const {
    tableData,
    pagination,
    table_loading,
    init,
    handleSizeChange,
    currentChange,
} = getTableData(findUserLog)

init()
</script>
<style lang="scss" scoped>
.text-ellipsis {
    white-space: nowrap;
    /* 文本不换行 */
    overflow: hidden;
    /* 隐藏超出容器的内容 */
    text-overflow: ellipsis;
    /* 使用省略号表示被截断的文本 */
}

.tooltip-contnet {
    width: 200px;
}
</style>
